<template>
  <div class="header_box">
    <div class="header">
      <div class="logo">
        <div class="kirakira" ref="kira"></div>
        <router-link to='/home'><img :src="logo"/></router-link>
      </div>
      <div class="lists">
        <ul class="nav">
          <li @click="toHome">首页</li>
          <li @click="toArtical">文章</li>
          <li @click="toTalk">交流</li>
          <li @click="toMyHome">我的主页</li>
        </ul>
        <div class="search_box" ref='search'>
          <ul>
            <li
              @click="toAticle"
              :id="itemss.id"
              v-for="itemss of $store.state.homeSearchArticle"
              :key="itemss.id"
            >
              <span @click="toAticle" :id="itemss.id">{{itemss.title}}</span>
              <span @click="toAticle" :id="itemss.id">{{itemss.nickname}}</span>
            </li>
          </ul>
        </div>
        <div class="input">
          <input type="text" autocomplete='on' v-model.trim="search" @blur="changeLonghandel2" @focus="changeLonghandel1" placeholder="Search..." />
          <span @click="toWrite" ref="wr">写文章</span>
        </div>
        <div
          class="my"
          ref="user"
          v-if="userShow === '2'"
          @click="showCenter"
          @mouseover="changeColor"
          @mouseout="changeColor2">
          <div class="a">
            <img :src="userIntro.avatar">
            <span class="user_name">{{userIntro.nickname || '没有昵称'}}</span>
          </div>
        </div>
        <span class="denglu" v-if="userShow === '2'" @click="dropOuthandel">登出账号</span>
        <span v-if="userShow === '1'" class="denglu" @click="dengluhandel">登录</span>
        <div class="admins" ref="admin" @mouseleave="adminD" title="开发日志">
          <div @click="toAdmin">开发日志</div>
          <div class="iconfont" @mouseenter='adminS'>&#xe680;</div>
        </div>
      </div>
      <user-intro v-if="userCenter" />
    </div>
  </div>
</template>

<script>
import { goOut, gg, homeSwearch, getArticalSmall } from 'com/shuju'
import { mapState } from 'vuex'
import UserIntro from './components/userintro'
export default {
  name: 'HomeHeader',
  components: {
    UserIntro
  },
  data () {
    return {
      tf: 0,
      my_img: require('../../../assets/images/touxiang.gif'),
      logo: require('../../../assets/images/logo1.png'),
      search: ''
    }
  },
  watch: {
    $route (to, from) {
      if (to.path === '/write' && this.$store.state.usertf === '1') {
        alert('去登录！')
        this.$router.push('/home')
        this.$store.commit('denglu', true)
      } else if (to.path === '/home') {
        this.$router.push('/home')
      } else if (to.path === '/writeOut' && from.path !== '/write') {
        alert('哈麻皮！')
        this.$router.push('/home')
      } else if (to.path === '/Myhome/article' &&
        from.path !== '/aricoal/small' &&
        this.$store.state.usertf === '1') {
        alert('去登录！')
        this.$router.push('/home')
      } else if ((to.path === '/userCenter/user' ||
        to.path === '/userCenter/article') &&
        this.$store.state.usertf === '1') {
        alert('去登录！')
        this.$router.push('/home')
      } else if (to.path === '/home') {
        var data = new FormData()
        data.set('page', 0)
        data.set('size', 6)
        data.set('bulletionTypeName', '公告')
        gg(data, this)
      }
    },
    search () { // 搜索文章
      if (!(this.search === '')) {
        var data = new FormData()
        data.set('keywords', 'like')
        data.set('likeskeywords', this.search)
        homeSwearch(data, this)
      } else {
        var obj = {}
        this.$store.commit('getHomeSearchArticle', obj)
      }
    },
    dengluTf () {
      if (this.dengluTf === false) {
        this.$refs.kira.style.display = 'block'
      } else if (this.dengluTf === true) {
        this.$refs.kira.style.display = 'none'
      }
    }
  },
  computed: {
    ...mapState({
      userShow: 'usertf', // 用户登录状态
      userName: 'username', // 用户昵称
      userIntro: 'nowUserIntro', // 登录用户所有信息
      userCenter: 'userCenter', // 控制用户面板显示
      dengluTf: 'denglutf' // 登录层显示
    })
  },
  methods: {
    adminS () {
      this.$refs.admin.style.top = '0px'
    },
    adminD () {
      this.$refs.admin.style.top = '-25px'
    },
    changeColor () {
      this.$refs.user.style.backgroundColor = 'rgb(60,120,188)'
    },
    changeColor2 () {
      if (!(this.tf === 2)) {
        this.$refs.user.style.backgroundColor = 'rgb(60,141,188)'
      }
    },
    showCenter () {
      this.$store.commit('changeUserCenter', !this.userCenter)
      if (!this.userCenter) {
        this.tf = 1
        this.$refs.user.style.backgroundColor = 'rgb(60,141,188)'
      } else {
        this.tf = 2
        this.$refs.user.style.backgroundColor = 'rgb(60,120,188)'
      }
    },
    dengluhandel () {
      this.$store.commit('denglu', true)
    },
    dropOuthandel () {
      this.$store.commit('changeUserCenter', false)
      this.$refs.user.style.backgroundColor = 'rgb(60,141,188)'
      var tf = confirm('是否退出登录?')
      if (tf) {
        this.$store.commit('changeUserCenter', false)
        this.$store.commit('saveuser', '1')
        this.$store.commit('getNowUserIntro', {})
        goOut(this)
      }
    },
    toAdmin () {
      this.$store.commit('changeUserCenter', false)
      this.$router.push('/admins')
    },
    toWrite () {
      this.$store.commit('changeUserCenter', false)
      if (this.userShow === '2') {
        this.$refs.user.style.backgroundColor = 'rgb(60,141,188)'
        this.$router.push('/write')
        this.$store.commit('changeUserCenter', false)
      } else {
        alert('快滚去登录！')
        this.$router.push('/home')
        this.dengluhandel()
      }
    },
    toMyHome () {
      this.$store.commit('changeUserCenter', false)
      if (this.$store.state.usertf === '2') {
        this.$refs.user.style.backgroundColor = 'rgb(60,141,188)'
        this.$store.commit('changeUserCenter', false)
        this.$store.commit('changeHomeTf', 1)
        this.$router.push({
          path: '/Myhome/article',
          query: {
            name: this.userIntro.username
          }
        })
      } else {
        alert('快滚去登录！')
        this.$router.push('/home')
        this.dengluhandel()
      }
    },
    toAticle () {
      this.$store.commit('changeUserCenter', false)
      this.$store.commit('changeUserCenter', false)
      var id = event.target.getAttribute('id')
      console.log(id)
      console.log('dayin')
      getArticalSmall(id, this)
    },
    toArtical () {
      this.$store.commit('changeUserCenter', false)
      if (this.$store.state.usertf === '2') {
        this.$refs.user.style.backgroundColor = 'rgb(60,141,188)'
      }
      this.$store.commit('changeUserCenter', false)
      this.$router.push('/aricoal')
    },
    toTalk () {
      this.$store.commit('changeUserCenter', false)
      this.$refs.user.style.backgroundColor = 'rgb(60,141,188)'
      alert('还未完成')
    },
    toHome () {
      this.$store.commit('changeUserCenter', false)
      if (this.$store.state.usertf === '2') {
        this.$refs.user.style.backgroundColor = 'rgb(60,141,188)'
      }
      this.$router.push('/home')
    },
    changeLonghandel1 () {
      this.$refs.wr.style.position = 'absolute'
      this.$refs.wr.style.top = '-62px'
      this.$refs.search.style.display = 'block'
    },
    changeLonghandel2 () {
      this.$refs.wr.style.top = '0px'
      setTimeout(() => {
        this.$refs.search.style.display = 'none'
      }, 200)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .header_box{
    position: relative
    width: 100%
    height: 1.3rem
    background-color: rgb(60,141,188)
    .header{
      position: relative
      width: 1200px
      height: 100%
      z-index: 1
      margin: 0 auto
      /*    Logo    */
      .logo{
        position: relative
        left: 0
        width: 200px
        height: 100%
        float: left
        .kirakira{
          position: absolute
          width: 90px
          left: 10px
          z-index: 2
          height: 35px
          background: linear-gradient(
            transparent 0%-40%,
            rgba(60,141,188,.6) 40%-90%,
            transparent 90%-100%
          )
          transform: rotate(90deg)
          transition: all 1s
          animation: 1.3s linear infinite kira
        }
        @keyframes kira{
            0%{
              left: 10px
            }
            50%{
              left: 60px
            }
            100%{
              left: 150px
            }
          }
        a{
          cursor: pointer
          width: 100%
          height: 100%
          color: rgb(255,255,255)
          line-height: 1.3rem
          display: inline-block
          text-align: center
          text-decoration: none
          img{
            position: absolute
            bottom: 0
            left: 0
          }
        }
      }
      /*    导航列表    */
      .lists{
        position: relative
        width: 1000px
        height: 100%
        float: left
        /*导航栏 */
        .nav{
          width: 340px
          height: 100%
          list-style: none
          padding: 0
          margin: 0
          float: left
          li{
            height: 95%
            line-height: 1.3rem
            color: rgb(255,255,255)
            font-size: .35rem
            box-sizing: border-box
            padding: .3rem
            padding-top: 0
            text-align: center
            float: left
          }
          li:hover{
            background: rgb(60,120,188)
            cursor: pointer
          }
        }
        .search_box{
          position: absolute
          width: 320px
          height: auto
          max-height: 332px
          overflow: hidden
          margin-top: 50px
          z-index: 5
          background-color: white
          left: 340px
          border-radius: 5px
          ul{
            width: 100%
            height: 100%
            padding: 0
            margin: 0
            list-style: none
            display: flex
            flex-direction: column
            li{
              width: 100%
              height: .7rem
              line-height: .7rem
              span:first-child{
                display: inline-block
                position: absolute
                left: .15rem
              }
              span:last-child{
                display: inline-block
                position: absolute
                right: .15rem
              }
            }
            li:hover{
              cursor: pointer
              background-color: rgb(180,180,180)
            }
          }
        }
        /*搜索框 */
        .input{
          width: 325px
          height: 100%
          float: left
          input{
            outline: none
            border: none
            width: 190px
            height: .45rem
            margin-top: 0.32rem
            font-size: .3rem
            vertical-align: middle
            border-radius: 5px
            color: #555
            padding-top: .1rem
            padding-bottom: .1rem
            padding-left: .2rem
            padding-right: .2rem
            transition: width .5s
            float: left
          }
          input:focus{
            width: 300px
          }
          span{
            float: left
            display: inline-block
            height: 95%
            line-height: 1.3rem
            color: rgb(255,255,255)
            font-size: .35rem
            box-sizing: border-box
            padding: .3rem
            padding-top: 0
            margin-left: .3rem
            transition: all .3s
            text-align: center
          }
          span:hover{
            background: rgb(60,120,188)
            cursor: pointer
          }
        }
        .denglu{
          float: left
          display: inline-block
          height: 95%
          line-height: 1.3rem
          color: rgb(255,255,255)
          font-size: .35rem
          box-sizing: border-box
          padding: .3rem
          padding-top: 0
          margin-left: .3rem
          text-align: center
        }
        .denglu:hover{
          background-color: rgb(60,120,188)
          cursor: pointer
        }
        /**管理员登录 */
        .admins{
          position: absolute
          right: -140px
          top: -25px
          width: 100px
          height: 50px
          transition: all .5s
          div:first-child{
            width: 100%
            height: 25px
            font-size: .35rem
            cursor: pointer
            line-height: 25px
            border-radius: 5px
            background-color: white
            text-align: center
            color: rgb(15,153,213)
          }
          div:last-child{
            position: absolute
            bottom: 12px
            left: 85px
            text-align: center
            line-height: 102px
            color: white
            font-size: .6rem
            width: 25px
            cursor: pointer
            height: 1px
            transform: rotate(90deg)
            animation: 1s linear infinite tet
          }
          @keyframes tet {
            0%{}
            50%{}
            100%{}
          }
        }
        /**个人信息区域 */
        .my{
          cursor: pointer
          float: left
          position: absolute
          right: 0
          width: 200px
          height: 100%
          white-space: nowrap
          .a{
            border: none
            width: 100%
            height: 100%
            line-height: 1.3rem
            color: rgb(255,255,255)
            img{
              display: inline-block
              width: 50px
              height: 50px
              border-radius: 70px
              margin-top: 7px
            }
            span{
              font-size: .33rem
              vertical-align: top
              color: rgb(255,255,255)
            }
            .user_name{
              text-align: center
            }
          }
        }
      }
    }
  }
</style>
